<template>
	<view class="page" :style="{'height':height+'px'}">
		<view class="header flex">
			<image class="header-bg" src="../../../static/images/jewel/reward_bg.jpg" mode="widthFix"></image>
			<view class="header-top">
				<view class="header-top-text">累计总奖励金额</view>
				<view class="header-top-num">￥{{data.total||0}}</view>
			</view>
			<view class="header-tar flex">
				<view class="header-tar-item">
					<view class="header-tar-item-num">￥{{data.no_accept||0}}</view>
					<view class="header-tar-item-text">待入账</view>
				</view>
				<view class="header-tar-item">
					<view class="header-tar-item-num">￥{{data.had_accept||0}}</view>
					<view class="header-tar-item-text">已入账</view>
				</view>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/agent_jewel/maker_coupon" class="header-tar-item">
					<view class="header-tar-item-num">{{data.coupon||0}}</view>
					<view class="header-tar-item-text">红包券</view>
				</navigator>
			</view>
		</view>
		<view style="flex: 1; overflow: hidden;">
			<scroll-view scroll-y class="reward-list" @scrolltolower="getMore">
				<view class="reward-list-li flex" v-for="(item,index) in rewardList" :key="index">
					<view class="reward-list-li-time">{{item.create_time}}</view>
					<view class="reward-list-li-state">{{item.is_accept_text}}</view>
					<view class="reward-list-li-num">{{item.money}}</view>
				</view>
				<mix-load-more :status="loadMoreStatus"></mix-load-more>
			</scroll-view>
		</view>
		<navigator open-type="navigate" url="/pages/jewel/agent_jewel/maker_coupon_recharge" hover-class="none" class="coupon-recharge">充值</navigator>
		<view class="m-full-loading" v-if="showLoading">
		    <view class="m-loading">
		        <image src="../../../static/images/loading.gif"></image>
		    </view>
		</view>
	</view>
</template>
<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				showLoading: false,
				data: [],
				maker_num:0,
				rewardList:[],
				height:uni.getSystemInfoSync().windowHeight,
				page:1,
				total_pages:1,
				loadMoreStatus:1,
			};
		},
        methods: {
			getData(type){
				let that = this
				if(that.page <= that.total_pages){
					that.showLoading = true
					jewel.get('Maker/getIncomeLog',{},true,function(res){
						that.showLoading = false;
						if(res.data.data.length === 0) that.loadMoreStatus = 2
						if(type == 'more'){
							that.rewardList = that.rewardList.concat(res.data.data)
						}else{
							that.rewardList = res.data.data
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages == 1||that.total_pages == 0?2:0
							if(type == 'refresh') uni.stopPullDownRefresh()
						}
					});
				}else{
					that.loadMoreStatus = 2
				}
			},
			getMore(){
				this.page++
				this.getData('more')
			}
        },
        onLoad() {
			let that = this
			jewel.get('Maker/income_count',{},true,function(res){
				that.data = res.data.data
			})
			that.getData('load')
        },
		onShow() {
			let that = this
			if(that.showLoading) return false
			jewel.get('Maker/income_count',{},true,function(res){
				that.data = res.data.data
			})
			that.getData('load')
		},
		onPullDownRefresh (){
			this.page = 1
			this.total_pages = 1
			this.loadMoreStatus = 1
			this.rewardList = []
			this.getData('refresh')
		}
	}
</script>
<style lang="scss">
	.flex{
		display: flex;
	}
	.m-full-loading{
		background-color: rgba($color: #ffffff, $alpha: 0);
	}
	.page{
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		.header{
			color: #FFFFFF;
			height: 525rpx;
			overflow: hidden;
			flex-direction: column;
			justify-content: flex-end;
			position: relative;
			z-index: 1;
			&-top{
				margin-bottom: 70rpx;
				padding-left: 34rpx;
				box-sizing: border-box;
				&-text{
					font-size: 36rpx;
					line-height: 35rpx;
					margin-bottom: 6rpx;
				}
				&-num{
					font-size: 66rpx;
					margin-left: -14rpx;
				}
			}
			&-tar{
				margin-bottom: 48rpx;
				&-item{
					text-align: center;
					line-height: 35rpx;
					flex: 1;
					&-text{
						font-size: 30rpx;
					}
					&-num{
						font-size: 36rpx;
						margin-bottom: 10rpx;
					}
				}
			}
			&-bg{
				position: absolute;
				top: 0;
				left: 0;
				width: 750rpx;
				height: 525rpx;
				z-index: -1;
			}
		}
		.reward-list{
			background-color: #f1f1f1;
			height: 100%;
			&-li{
				background-color: #FFFFFF;
				border-bottom: 1px solid #cccccc;
				justify-content: space-between;
				padding: 22rpx 20rpx 22rpx 30rpx;
				box-sizing: border-box;
				align-items: center;
				line-height: 35rpx;
				&:last-child{
					border-bottom: 0;
				}
				&-time{
					color: #666666;
					font-size: 28rpx;
					width: 33.33%;
					text-align: left;
				}
				&-state{
					color: #1a1a1a;
					font-size: 32rpx;
					width: 33.33%;
					text-align: center;
				}
				&-num{
					color: #d71511;
					font-size: 36rpx;
					width: 33.33%;
					text-align: right;
				}
			}
			&-nodata{
				text-align: center;
				padding: 50rpx 0;
			}
		}
		.coupon-recharge{
			margin: 10rpx auto;
			width: 716rpx;
			line-height: 108rpx;
			background-color: #d71511;
			color: #FFFFFF;
			text-align: center;
			font-size: 36rpx;
			border-radius: 50px;
		}
	}
	
</style>
